<template>
	<view class="withdrawal-history-list">
		<custom-tabs type="c1" :value="current" @change="change" :tabSpacing="16">
			<custom-tab-pane style="width:100%" :label="item.label" :key="key" name="c1_2"
				v-for="item,key,index in withdrawHistoryList">
				<view class="tab-content-wrapper">
					<scroll-view scroll-y style="height:100%;" @scrolltolower="getHistoryList(key)">
						<view class="history-item" v-for="ditem,dindex in item.list" :key="ditem.task_code">
							<historyItem :detail="ditem" />
						</view>
						<uni-load-more iconType="circle" :status="item.loading_status" @click="getHistoryList(key)" />
					</scroll-view>
				</view>
			</custom-tab-pane>
		</custom-tabs>
	</view>
</template>

<script lang="ts">
	export default {
		name: 'navbar',
		options: {
			styleIsolation: 'shared'
		},
	}
</script>

<script lang="ts" setup>
	import historyItem from "../historyItem/historyItem.vue";
	import { reactive, ref, Ref, defineProps } from 'vue';
	import type { IHistoryDetail } from '../historyItem/types';
	import { WITHDRAWAL_STATUS, WITHDRAWAL_STATUS_LABEL, WITHDRAWAL_WAY } from '@/enum/withdrawal';
	import { LOADING_STATUS } from '@/enum/loadingStatus';
	import REST_URL from "@/http/http.restUrl";
	import { useStore } from 'vuex';
	import { GET_STORE_USERINFO } from '@/store/gettersType';


	interface IProps {
		withdrawal_way : WITHDRAWAL_WAY,
	}

	const props = withDefaults(defineProps<IProps>(), {
		withdrawal_way: WITHDRAWAL_WAY.RED_PACKET_BALANCE
	})

	const current : Ref<number> = ref(0);

	const store = useStore();

	interface IWithdrawHistoryList {
		all : IWithdrawHistoryItem,
		pending : IWithdrawHistoryItem,
		check_success : IWithdrawHistoryItem,
		check_fail : IWithdrawHistoryItem,
	}

	interface IWithdrawHistoryItem {
		value : WITHDRAWAL_STATUS | undefined,
		label : WITHDRAWAL_STATUS_LABEL | '全部',
		loading_status : LOADING_STATUS,
		pageNum : number;
		pageSize : number;
		list : IHistoryDetail[],
	}



	const withdrawHistoryList : IWithdrawHistoryList = reactive({
		all: {
			label: '全部',
			value: undefined,
			loading_status: LOADING_STATUS.MORE,
			pageNum: 1,
			pageSize: 8,
			list: []
		},
		pending: {
			label: WITHDRAWAL_STATUS_LABEL.PENDING,
			value: WITHDRAWAL_STATUS.PENDING,
			loading_status: LOADING_STATUS.MORE,
			pageNum: 1,
			pageSize: 8,
			list: []
		},
		check_success: {
			label: WITHDRAWAL_STATUS_LABEL.CHECK_SUCCESS,
			value: WITHDRAWAL_STATUS.CHECK_SUCCESS,
			loading_status: LOADING_STATUS.MORE,
			pageNum: 1,
			pageSize: 8,
			list: []
		},
		check_fail: {
			label: WITHDRAWAL_STATUS_LABEL.CHECK_FAIL,
			value: WITHDRAWAL_STATUS.CHECK_FAIL,
			loading_status: LOADING_STATUS.MORE,
			pageNum: 1,
			pageSize: 8,
			list: []
		}
	});

	interface IChangeOptions {
		label : string;
		name : string;
		value : number;
	}

	const change = (e : IChangeOptions | number) => {
		const index : number = typeof e === 'number' ? (e as number) : (e as IChangeOptions).value;
		const tab_keys : string[] = Object.keys(withdrawHistoryList);
		const current_key : keyof IWithdrawHistoryList = (tab_keys[index] as keyof IWithdrawHistoryList);
		console.log(!withdrawHistoryList[current_key].list.length)
		if (!withdrawHistoryList[current_key].list.length) {
			getHistoryList(current_key)
		}
	}


	interface IRequestOptions {
		customer_id : number,
		page_from : WITHDRAWAL_WAY,
		status ?: WITHDRAWAL_STATUS,
		page : number;
		page_num : number;
	}


	const getHistoryList = async <T extends keyof IWithdrawHistoryList>(key : T) : Promise<void> => {
		await uni.loginManger.$interceptor;

		if (withdrawHistoryList[key].loading_status !== LOADING_STATUS.MORE) {
			return
		}

		const options : IRequestOptions = {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			page_from: props.withdrawal_way,
			page: withdrawHistoryList[key].pageNum,
			page_num: withdrawHistoryList[key].pageSize,
		};

		if (withdrawHistoryList[key].value) options.status = withdrawHistoryList[key].value;

		withdrawHistoryList[key].loading_status = LOADING_STATUS.LOADING;

		const data = (await uni.http.POST(REST_URL.getWithdrawalHistoryList, options)).data;

		withdrawHistoryList[key].list.push(...data.data);

		withdrawHistoryList[key].pageNum++;

		withdrawHistoryList[key].loading_status = withdrawHistoryList[key].list.length >= data.total ? LOADING_STATUS.NOMORE : LOADING_STATUS.MORE;

		console.log(data);
	}

	change(current.value);
</script>

<style scoped lang="scss">
	@import "./withdrawalHistoryList.scss";
</style>